<template>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="###"><b>BILL</b> 财务管理 </a>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">录入（主页）</a>
                    </li>
                    <li class="nav-item">
                        <router-link to="/read">
                            <a class="nav-link" href="###">查看</a>
                        </router-link>
                    
                    </li>
                    <li class="nav-item">
                    <router-link to="/manage">
                        <a class="nav-link" href="###">管理</a>
                    </router-link>
                    </li>
                </ul>
                
            </div> 

            <div class="buttons d-grid gap-2 d-md-flex justify-content-md-end"  v-if="login">
                <router-link to="/login">
                    <button class="btn btn-outline-primary btn-sm" type="button">登录</button>
                </router-link>
                <router-link to="/register">
                    <button class="btn btn-outline-primary btn-sm" type="button">注册</button>
                </router-link>
            </div>

            <div class="dropdown" v-show="!login" ref="dropdownRef">
                <button class="btn btn-primary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" @click = "toggleOpen">
                    你好！{{username}}
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" :style="{display: 'block'}" v-show="isOpen">
                    <li><router-link to="/modify"><a class="dropdown-item" href="###">修改密码</a></router-link></li>
                    <li><a class="dropdown-item" href="###">更多</a></li>
                    <li><a class="dropdown-item" href="###" @click="exit">退出登录</a></li>
                </ul>
            </div>

        </div>
    </nav>

</template>

<script lang='ts'>
import axios from 'axios'
import { useStore } from 'vuex'
import { defineComponent, onMounted, PropType, ref, watch} from 'vue'
import useClickOutside from '../hooks/useClickOutside'
export interface UserProps {
    id: number;
    name: string;
    email: string;
    password: string;
    isLogin: boolean;
}

export default defineComponent({
    name: 'index',
    props: {
        user: {
            type: Object as PropType<UserProps>,
            required: true
        }
    },

    setup() {
       
        //isOpen下拉列表的隐藏与展示
        const isOpen = ref(false)
        const toggleOpen = () => {
            isOpen.value = !isOpen.value
        }

        //退出登录后的组件切换，有后端后只需要isLogin来判断即可
        const store = useStore()
        const username = ref()
        const login = ref()
        
        login.value = localStorage.getItem('login')
        username.value = localStorage.getItem('name')
        localStorage.removeItem('loginout')
        const exit = () => {

            axios.get(`/api/user/logout`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

                if (res.status === 200) {
                    store.commit('exit')
                    localStorage.setItem('login',store.state.login)
                    login.value = localStorage.getItem('login')
                    login.value = true

                    console.log(login.value)

                    alert(res.data)
                }
            })
            
        }

        //判断用户是否登录，使用localStorage
        onMounted(() => {
            if(localStorage.getItem('login')?.length === 5) {
                login.value = false
            }
        })

        //实现点击其他部位也能让隐藏下拉列表
        //仅仅是ref(null)返回的是null类型，并不是DOM节点
        //所以需要使用联合类型泛型
        const dropdownRef = ref<null | HTMLElement>(null)
        //isClickOutside是一个从useClickOutside引入进来的钩子函数
        const isClickOutside = useClickOutside(dropdownRef)
        watch(isClickOutside, () => {
            if(isOpen.value && isClickOutside.value) {
                isOpen.value = false
            }
        })

        return {
            isOpen,
            toggleOpen,

            login,
            username,
            exit,

            dropdownRef,
        }
    },

})
</script>

<style lang='stylus' scoped>
a
  text-decoration none
.navbar
  margin-top -50px
  border 1px #ccc solid
  .navbar-brand
    font-size 15px
    b
      color #0d6efd
      font-size 25px
  .navbar-collapse
    margin-left 30px
    a
      text-decoration none
    a:hover 
      color #0d6efd
    .active 
      color #0d6efd
  .dropdown
    .dropdown-menu
      width 100%
      text-align center
      margin-top 17px
      //margin-left -5px
      min-width 7rem
      .dropdown-item
        color #0d6efd
        font-size 18px
      .dropdown-item:active
        color #fff
</style>
